<template>
  <div class="calculator" v-if="show">
    <div class="kaiguan" @click="closeDialog">
      <img class="kaiguan-img"
        src="//image.zlketang.com/public/news/images/guanwangPic/guanbi.png"
      />
    </div>
    <button @click="changeModeEvent" class="toggle-button">
      <p class="jisuanqi-title" v-if="changeMode">
        切换为科学计算器 &nbsp; &nbsp; &#9864;
      </p>
      <p class="jisuanqi-title" v-else>
        切换为普通计算器 &nbsp; &nbsp; &#9862;
      </p>
    </button>
    <div class="results">
      <input class="input" v-model="current" />
    </div>
    <div class="mode" v-if="changeMode">
      <button class="button" @click="press">7</button>
      <button class="button" @click="press">8</button>
      <button class="button" @click="press">9</button>
      <button class="button" @click="press">*</button>
      <button class="button" @click="press">&#60;=</button>
      <button class="button" @click="press">C</button>
      <button class="button" @click="press">4</button>
      <button class="button" @click="press($event)">5</button>
      <button class="button" @click="press">6</button>
      <button class="button" @click="press">/</button>
      <button class="button" @click="press">(</button>
      <button class="button" @click="press">)</button>
      <button class="button" @click="press">1</button>
      <button class="button" @click="press">2</button>
      <button class="button" @click="press">3</button>
      <button class="button" @click="press">-</button>
      <button class="button" @click="press">x ²</button>
      <button class="button" @click="press">±</button>
      <button class="button" @click="press">0</button>
      <button class="button" @click="press">.</button>
      <button class="button" @click="press">%</button>
      <button class="button" @click="press">+</button>
      <button class="button equal-sign" @click="press">=</button>
    </div>
    <div class="mode" v-else>
      <button class="button" @click="press">sin</button>
      <button class="button" @click="press">cos</button>
      <button class="button" @click="press">tan</button>
      <button class="button" @click="press">x^</button>
      <button class="button" @click="press">&#60;=</button>
      <button class="button" @click="press">C</button>
      <button class="button" @click="press">log</button>
      <button class="button" @click="press">ln</button>
      <button class="button" @click="press">e</button>
      <button class="button" @click="press">∘</button>
      <button class="button" @click="press">rad</button>
      <button class="button" @click="press">√</button>
      <button class="button" @click="press">7</button>
      <button class="button" @click="press">8</button>
      <button class="button" @click="press">9</button>
      <button class="button" @click="press">/</button>
      <button class="button" @click="press">x ²</button>
      <button class="button" @click="press">x !</button>
      <button class="button" @click="press">4</button>
      <button class="button" @click="press">5</button>
      <button class="button" @click="press">6</button>
      <button class="button" @click="press">*</button>
      <button class="button" @click="press">(</button>
      <button class="button" @click="press">)</button>
      <button class="button" @click="press">1</button>
      <button class="button" @click="press">2</button>
      <button class="button" @click="press">3</button>
      <button class="button" @click="press">-</button>
      <button class="button" @click="press">%</button>
      <button class="button" @click="press">±</button>
      <button class="button" @click="press">0</button>
      <button class="button" @click="press">.</button>
      <button class="button" @click="press">&#x003C0;</button>
      <button class="button" @click="press">+</button>
      <button class="button equal-sign" @click="press">=</button>
    </div>
  </div>

</template>
<script>
export default {
  data: function() {
    return { current: '', changeMode: !0 }
  },
  props: { show: { type: Boolean, default: !1 } },
  methods: {
    closeDialog: function() {
      this.$emit('update:show', !1)
    },
    
    press(event) {
              var me = this
              var key = event.target.textContent

              if (
                key != '=' &&
                key != 'C' &&
                key != '*' &&
                key != '/' &&
                key != '√' &&
                key != 'x ²' &&
                key != '%' &&
                key != '<=' &&
                key != '±' &&
                key != 'sin' &&
                key != 'cos' &&
                key != 'tan' &&
                key != 'log' &&
                key != 'ln' &&
                key != 'x^' &&
                key != 'x !' &&
                key != 'π' &&
                key != 'e' &&
                key != 'rad' &&
                key != '∘'
              ) {
                me.current += key
              } else if (key === '=') {
                if (me.current.indexOf('^') > -1) {
                  var base = me.current.slice(0, me.current.indexOf('^'))
                  var exponent = me.current.slice(me.current.indexOf('^') + 1)
                  me.current = eval('Math.pow(' + base + ',' + exponent + ')')
                } else {
                  me.current = eval(me.current)
                }
              } else if (key === 'C') {
                me.current = ''
              } else if (key === '*') {
                me.current += '*'
              } else if (key === '/') {
                me.current += '/'
              } else if (key === '+') {
                me.current += '+'
              } else if (key === '-') {
                me.current += '-'
              } else if (key === '±') {
                if (me.current.charAt(0) === '-') {
                  me.current = me.current.slice(1)
                } else {
                  me.current = '-' + me.current
                }
              } else if (key === '<=') {
                me.current = me.current.substring(0, me.current.length - 1)
              } else if (key === '%') {
                let lastNum = me.current.match(/[\d\.]+$/g)
                  if (!lastNum) return
                  let computedNum = lastNum / 100
                  me.current = me.current.replace(/[\d\.]+$/g,'')
                  me.current += computedNum
              } else if (key === 'π') {
                me.current = me.current * Math.PI
              } else if (key === 'x ²') {
                me.current = eval(me.current * me.current)
              } else if (key === '√') {
                me.current = Math.sqrt(me.current)
              } else if (key === 'sin') {
                me.current = Math.sin(me.current)
              } else if (key === 'cos') {
                me.current = Math.cos(me.current)
              } else if (key === 'tan') {
                me.current = Math.tan(me.current)
              } else if (key === 'log') {
                me.current = Math.log10(me.current)
              } else if (key === 'ln') {
                me.current = Math.log(me.current)
              } else if (key === 'x^') {
                me.current += '^'
              } else if (key === 'x !') {
                var number = 1
                if (me.current === 0) {
                  me.current = '1'
                } else if (me.current < 0) {
                  me.current = NaN
                } else {
                  var _number = 1
                  for (var i = me.current; i > 0; i--) {
                    _number *= i
                  }
                  me.current = _number
                }
              } else if (key === 'e') {
                me.current = Math.exp(me.current)
              } else if (key === 'rad') {
                me.current = me.current * (Math.PI / 180)
              } else if (key === '∘') {
                me.current = me.current * (180 / Math.PI)
              }
            },
    changeModeEvent: function() {
      this.changeMode = !this.changeMode
    }
  }
}
</script>
<style scoped>
.calculator {
  width: 250px;
  padding: 10px;
  border-radius: 2.5px;
  margin: 10px auto;
  font-size: 8px;
  background-color: #03A9F4;
  position: absolute;
  left: 32px;
  bottom: 50px;
  height: 280px;
  border-top: 5px solid transparent;
}

.kaiguan {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  text-align: center;
  font-size: 13px;
  line-height: 30px;
  cursor: pointer;
}
.kaiguan-img {
  width: 100%;
  height: auto;
}
.input {
  width: 210px;
  height: 25px;
  border-radius: 0px;
  border: 1px solid black;
  background-color: #ddebf6;
  color: black;
  padding: 0 2px 0 2px;
  margin: 0 0px 10px 0px;
  font-size: 15px;
}

.input:focus,
.input:active {
  border-color: #03a9f4;
  box-shadow: 0 0 4px #03A9F4;
  outline: none 0;
}

.button {
  margin: 1.5px;
  width: 31.5px;
  border: 1px solid #ddebf6;
  height: 30px;
  border-radius: 2px;
  color: black;
  background-color: #ddebf6;
  cursor: pointer;
  outline: none;
}

.mode {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.equal-sign {
  background-color: #03A9F4;
  width: 66.5px;
}

.toggle-button {
  border: none;
  cursor: pointer;
  outline: none;
  font-size: 1rem;
  color: #fff;
}

.jisuanqi-title {
  margin-top: 0;
  text-align: center;
  height: 21px;
}

button::-moz-focus-inner {
  border-color: transparent;
}

</style>
